import React, { Component } from "react";
import "./shopCar.scss";
import "./iconfont.css";

class App extends Component {
  state = {
    select_num: 0, // 已经选中商品数
    totalPrice: 0, // 总价
    products: [
      {
        id: 1,
        product_title: "黑科技分区控温，95%鹅绒抗菌儿童鹅绒被",
        img_url:
          "https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75",
        price: "588",
        origin_price: 599,
        num: 1,
        checked: true,
      },
      {
        id: 2,
        product_title: "黑科技分区控温，hahah95%鹅绒抗菌儿童鹅绒被",
        img_url:
          "https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75",
        price: "589",
        origin_price: 599,
        num: 1,
        checked: true,
      },
    ],
  };
  // 点击加号
  add = (index) => {
    console.log(index)
    let products = this.state.products
    products[index].num++
    if(products[index].num>10){
      products[index].num = 10
      console.log('加到了最大');
    }
    this.setState({
      products
    })
  }
  // 点击减号
  sub = (index) => {
    console.log(index)
    let products = this.state.products
    products[index].num--
    if(products[index].num<1){
      products[index].num = 1
      console.log('减到了最小');
    }
    this.setState({
      products
    })
  }
  // 选中的商品数量
  getSelectNum = () => {
    let select_num = 0
    this.state.products.map(p=>{
      if(p.checked){
        select_num+=p.num
      }
    })
    return select_num
  }
  // 总价
  getTotalPrice = () => {
    let totalPrice = 0
    this.state.products.map(p=>{
      totalPrice+=p.price*p.num
    })
    return totalPrice
  }
  // 优惠
  getDiscounts = () => {
    let Discounts = 0
    this.state.products.map(p=>{
      if(p.checked){
        Discounts+=Math.abs((p.price-p.origin_price)*p.num)
      }
    })
    return Discounts
  }
  render() {
    return (
      <div className="shopcar">
        <div className="shoptop">
          <ul className="goodsList">
            {this.state.products.map((p,index) => {
              return (
                <li className="goodsitem" key={p.id}>
                  <div className="item-left">
                    <i className="iconfont icon-sousuo"></i>
                    <img src={p.img_url} alt="" />
                  </div>
                  <div className="item-right">
                    <p>{p.product_title}</p>
                    <div className="item-rb">
                      <div className="rb-left">
                        <span>￥{p.price}</span>
                        <s>￥{p.origin_price}</s>
                      </div>
                      <div className="rb-right">
                        <span className="sub" onClick={this.sub.bind(this,index)}>-</span>
                        <span className="num">{p.num}</span>
                        <span className="add" onClick={this.add.bind(this,index)}>+</span>
                      </div>
                    </div>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
        <div className="shopbottom">
          <div className="b-left">
            <i className="iconfont icon-sousuo"></i>
            <span>已选中（{this.getSelectNum()}）件</span>
          </div>
          <div className="b-right">
            <div className="r-left">
              <div className="rl-top">总价：￥{this.getTotalPrice()}</div>
              <div className="rl-bottom">优惠：￥{this.getDiscounts()}</div>
            </div>
            <div className="r-right">
              <span>去结算</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
